<template>
    <div>
      <el-row>
      <el-col :span="24">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统设置</el-breadcrumb-item>
        <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
      </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-button type="success" plain @click="addParentMenu('addMenuForm')" size="medium">添加菜单</el-button>
      </el-col>
    </el-row>
     <tree-grid
    :treeStructure="true"
    :columns="columns"
    :data-source="dataSource"
    :usersShow="false"
    :menushide="true"
    :menustargethide="true"
    :defaultExpandAll="false"
    @addOrg="addCurrentMenu"
    @deleteOrg="deleteCurrentMenu"
    @editOrg="editCurrentMenu"
    >
    </tree-grid>
    <!-- 添加子节点 -->
    <el-dialog title="添加子菜单" :visible.sync="addDialogFormVisible" width="20%">
      <el-form :model="addMenuForm" label-width="80px" :rules="rules" ref="addMenuForm" size="medium">
        <el-form-item label="上级菜单" prop="pmenuName">
          <el-input v-model="addMenuForm.pmenuName" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="addMenuForm.menuName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="menuIcon">
          <el-input v-model="addMenuForm.menuIcon" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="弹出方式" prop="menuTarget">
           <el-select v-model="addMenuForm.menuTarget" placeholder="请选择弹出方式">
              <el-option
               v-for="item in menuTargetList"
               :key="item.value"
               :label="item.label"
               :value="item.value">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单URL" prop="menuUrl">
          <el-input v-model="addMenuForm.menuUrl" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="关键字" prop="keyword">
           <el-select v-model="addMenuForm.keyword" placeholder="请选择关键字" clearable>
              <el-option
               v-for="item in keywordList"
               :key="item.value"
               :label="item.label"
               :value="item.label">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单状态" prop="menuHide">
          <el-switch v-model="addMenuForm.menuHide" active-text="启用" inactive-text="停用" :active-value= 1
    :inactive-value= 0>
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="addMenuSubmit('addMenuForm')" size="medium">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑子节点 -->
    <el-dialog title="编辑菜单" :visible.sync="editDialogFormVisible" width="20%">
      <el-form :model="editMenuForm" label-width="80px" :rules="rules" ref="editMenuForm" size="medium">
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="editMenuForm.menuName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="menuIcon">
          <el-input v-model="editMenuForm.menuIcon" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="弹出方式" prop="menuTarget">
           <el-select v-model="editMenuForm.menuTarget" placeholder="请选择弹出方式">
              <el-option
               v-for="item in menuTargetList"
               :key="item.value"
               :label="item.label"
               :value="item.value">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单URL" prop="menuUrl">
          <el-input v-model="editMenuForm.menuUrl" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="关键字" prop="keyword">
           <el-select v-model="editMenuForm.keyword" placeholder="请选择关键字" clearable>
              <el-option
               v-for="item in keywordList"
               :key="item.value"
               :label="item.label"
               :value="item.label">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单状态" prop="menuHide">
          <el-switch v-model="editMenuForm.menuHide" active-text="启用" inactive-text="停用" :active-value= 1
    :inactive-value= 0>
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="editMenuSubmit('editMenuForm')" size="medium">确 定</el-button>
      </div>
    </el-dialog>
    </div>
</template>
<script>
import TreeGrid from '@/components/TreeGrid/TreeGrid'
import { getMenuTree, getMenuKeywords, addMenus, editMenus, deleteMenu, checkMenuName } from '@/api'
export default {
  data () {
    var validateMenuName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入菜单名称'))
      }
      setTimeout(() => {
        checkMenuName({ params: { txt: value, id: this.menuid, pid: this.pid } }).then(res => {
          if (res.code === 200) {
            if (res.data) {
              callback(new Error('菜单名称已经存在'))
            } else {
              callback()
            }
          } else {
            callback(new Error('用户名验证失败'))
          }
        })
      }, 500)
    }
    return {
      dataSource: [],
      columns: [{
        text: '菜单名称',
        dataIndex: 'text',
        width: '300'
      }, {
        text: '菜单URL',
        dataIndex: 'url',
        width: '250'
      }, {
        text: '关键字',
        dataIndex: 'keyword',
        width: '150'
      }, {
        text: '权限',
        dataIndex: 'functionText',
        width: '400'
      }],
      addDialogFormVisible: false,
      addMenuForm: {
        pid: '',
        pmenuName: '',
        menuName: '',
        menuIcon: '',
        menuHide: '',
        menuTarget: '',
        menuUrl: '',
        keyword: ''
      },
      editDialogFormVisible: false,
      editMenuForm: {
        id: '',
        menuName: '',
        menuIcon: '',
        menuHide: '',
        menuTarget: '',
        menuUrl: '',
        keyword: ''
      },
      // 添加子节点表单验证
      rules: {
        menuName: [
          { required: true, validator: validateMenuName, trigger: 'blur' }
        ],
        menuTarget: [
          { required: true, message: '请选择弹出方式', trigger: 'blur' }
        ]
      },
      // 弹出方式选择框
      menuTargetList: [{
        value: 1,
        label: '无链接'
      }, {
        value: 2,
        label: '框架页'
      }, {
        value: 3,
        label: '弹出页'
      }],
      // 关键字下拉选择数据
      keywordList: [],
      menuid: '',
      pid: 0
    }
  },
  components: {
    TreeGrid
  },
  created () {
    this.initList()
  },
  methods: {
    // 初始化菜单列表
    initList () {
      getMenuTree(0).then(res => {
        this.dataSource = res.data
        if (res.code === 200) {
          this.dataSource = res.data
        } else {
          this.$message({
            type: 'warning',
            message: res.msg
          })
        }
      })
    },
    // 添加第一级菜单弹出
    addParentMenu (formName) {
      this.resetForm(formName)
      this.addDialogFormVisible = true
      this.addMenuForm.pid = 0
      this.getMenuKeywords()
    },
    // 添加子节点弹出
    addCurrentMenu (row) {
      this.resetForm('addMenuForm')
      this.addDialogFormVisible = true
      this.addMenuForm.pmenuName = row.text
      this.addMenuForm.pid = row.id
      this.pid = row.id
      this.getMenuKeywords()
    },
    resetForm (formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
    },
    // 获取关键字下拉数据
    getMenuKeywords () {
      this.keywordList = []
      getMenuKeywords().then(res => {
        if (res.code === 200) {
          res.data.forEach((item, index) => {
            this.keywordList.push({ value: index, label: item })
          })
        }
      })
    },
    // 保存添加子菜单
    addMenuSubmit (formName) {
      this.$refs[formName].validate(valide => {
        if (valide) {
          // 执行添加子菜单方法
          addMenus({
            pid: this.addMenuForm.pid,
            menuName: this.addMenuForm.menuName,
            menuIcon: this.addMenuForm.menuIcon,
            menuHide: this.addMenuForm.menuHide,
            menuTarget: this.addMenuForm.menuTarget,
            menuUrl: this.addMenuForm.menuUrl,
            keyword: this.addMenuForm.keyword
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '添加菜单成功'
              })
              this.addDialogFormVisible = false
              this.initList()
            }
          })
        }
      })
    },
    // 编辑当前菜单
    editCurrentMenu (row) {
      this.resetForm('editMenuForm')
      this.editDialogFormVisible = true
      this.editMenuForm.id = row.id
      this.editMenuForm.menuName = row.text
      this.editMenuForm.menuIcon = row.icon
      this.editMenuForm.menuTarget = row.target
      this.editMenuForm.menuUrl = row.url
      this.editMenuForm.keyword = row.keyword
      this.editMenuForm.menuHide = row.hide
      this.menuid = row.id
      this.pid = row.pid
      this.getMenuKeywords()
    },
    // 保存编辑菜单
    editMenuSubmit (formName) {
      this.$refs[formName].validate(valide => {
        if (valide) {
          // 执行编辑子菜单方法
          editMenus(this.editMenuForm).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '编辑菜单成功'
              })
              this.editDialogFormVisible = false
              this.initList()
            }
          })
        }
      })
    },
    // 删除当前菜单
    deleteCurrentMenu (menuid) {
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 执行删除用户操作
        deleteMenu(menuid).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style lang="sass" scoped>
</style>
